<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      class="query-form"
      :model="queryParams"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="风机名称" prop="equName">
        <el-input
          v-model="queryParams.equName"
          placeholder="请输入风机名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
        <el-button size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-form-item style="float:right;">
        <el-button type="primary" size="small" @click="openIntelligentControl">智能控制</el-button>
      </el-form-item>
    </el-form>
    <div class="content-container" style="background-color: #F2F3F5;overflow-y: scroll;padding: 0;">
      <el-row :gutter="20">
        <el-col v-for="key in Object.keys(equList)" :key="key" :md="24" :lg="12">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <span>{{ equList[key][0].locationName }}（{{ equList[key][0].direction }}）</span>
              <el-button style="float: right; padding: 3px 0" type="text">当前CO浓度：20.76</el-button>
            </div>
            <!-- <el-row :gutter="20">
              <el-col v-for="item in equList[key]" :key="item.id" :lg="12" :md="8" :sm="12"> -->
            <div style="margin: 0 -10px;">
              <FenCard
                v-for="item in equList[key]"
                :key="item.id"
                :info="item"
                style="margin: 0 5px 10px 5px;"
                @details="handleView(item)"
                @control="handleControl(item)"
              />
            </div>
            <!-- </el-col>
            </el-row> -->
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--  -->
    <!-- <el-dialog :title="title" :visible.sync="open1" width="800px" append-to-body>
      <div style="display: flex;">
        <div style="width: 200px;">
          <dv-border-box-8 :dur="10" style="width:200px;height:200px;" />
        </div>
        <div style="flex:1">
          <el-form ref="form" :model="form1" :rules="rules" label-width="80px" size="mini">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item style="margin-bottom: 10px;" label="灯组名称" prop="equName">{{ form1.equName }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item style="margin-bottom: 10px;" label="购入价格" prop="price">{{ form1.price }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item style="margin-bottom: 10px;" label="灯组类型" prop="lightType">
                  <span v-if="form1.lightType ==1 ">照明灯组</span>
                  <span v-if="form1.lightType ==2 ">交通指示灯</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item style="margin-bottom: 10px;" label="安装位置" prop="locationName"> {{ form1.locationName }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item style="margin-bottom: 10px;" label="生产日期" prop="produceDate"> {{ form.produceDate }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item style="margin-bottom: 10px;" label="生产厂家" prop="produceCompany"> {{ form1.produceCompany }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item style="margin-bottom: 10px;" label="供应商" prop="supplier"> {{ form1.supplier }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item style="margin-bottom: 10px;" label="质保期" prop="warranty"> {{ form1.warranty }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item style="margin-bottom: 10px;" label="规格型号" prop="brand"> {{ form1.brand }}
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item style="margin-bottom: 10px;" label="ip地址" prop="ip"> {{ form1.ip }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-divider content-position="left">运行参数</el-divider>
      <el-form ref="form" :model="form1" label-width="80px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="状态" prop="status" style="margin-bottom: 4px;">
              <span v-if="form1.status1 == 1" class="text-info">运行中</span>
              <span v-else-if="form1.status1 == 2" class="text-warning">故障</span>
              <span v-else>关闭</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="电压" style="margin-bottom: 4px;"> {{ form1.electricTension }} v
            </el-form-item></el-col>
          <el-col :span="5">
            <el-form-item label="电流" style="margin-bottom: 4px;"> {{ form1.electricCurrent }} mA
            </el-form-item></el-col>
          <el-col :span="5">
            <el-form-item label="转速" style="margin-bottom: 4px;"> {{ form1.rotarySpeed }} 转/min
            </el-form-item></el-col>
          <el-col :span="5">
            <el-form-item label="震动值" style="margin-bottom: 4px;"> {{ form1.vibrationValue }} mm/s
            </el-form-item></el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog> -->
    <IntelligentControl ref="IntelligentControl" />
    <SingleControl ref="control" @success="getList" />
    <Details ref="Details" />
  </div>
</template>

<script>
import FenCard from './components/FenCard'
import SingleControl from './components/Control.vue'
import Details from './components/Details.vue'
import IntelligentControl from './components/IntelligentControl.vue'
import { addEqu, delEqu, getEqu, listEqu, updateEqu } from '@/api/fjgs/equ'
// import { number } from 'echarts'
import { groupBy } from 'loadsh'
export default {
  name: 'Equ',
  components: {
    FenCard,
    IntelligentControl,
    SingleControl,
    Details
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备定义表格数据
      equList: {},
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      open1: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equName: null,
        locationName: null,
        produceCompany: null,
        supplier: null,
        brand: null,
        price: null,
        produceDate: null,
        warranty: null,
        ip: null,
        lightType: null,
        equType: 1
      },
      // 表单参数
      form: {
        status: undefined,
        illuminance: null
      },
      // 表单校验
      rules: {
      },
      form1: {},
      timerr: null
    }
  },
  created() {
    this.getList()
    this.loopDeviceDetails()
  },
  beforeDestroy() {
    clearTimeout(this.timerr)
  },
  methods: {
    openIntelligentControl() {
      this.$refs.IntelligentControl.open()
    },
    formatTooltip(val) {
      return val + 'cd/m^2'
    },
    loopDeviceDetails() {
      const _this = this
      this.timerr = setTimeout(() => {
        _this.getList().finally(() => {
          _this.loopDeviceDetails()
        })
      }, 30000)
    },
    /** 查询设备定义列表 */
    async getList() {
      this.loading = true
      return await listEqu(this.queryParams).then(response => {
        this.equList = groupBy(response.rows, 'locationId')
        this.total = response.total
        this.loading = false
      })
    },

    // 取消按钮
    cancel() {
      this.open = false
      this.open1 = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        status: false,
        illuminance: null,
        equType: 2
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleView(row) {
      this.$refs.Details.handleView(row)
    },
    handleControl(row) {
      this.$refs.control.open(row)
    }
  }
}
</script>

<style lang="scss" scoped>

.box-card {
  margin-bottom: 20px;
  &::v-deep .el-card__header{
    border-bottom: none;
  }
}
.light_card {
  display: inline-block;
  position: relative;
  width: 300px; min-height: 220px;
  background: #FFFFFF;
  // box-shadow: 0 10px 40px 0 rgba(51,119,255,0.20);
  border-radius: 4px;
  margin: 0 10px 20px 10px;
  padding-bottom: 40px;
  transition: box-shadow 0.3s;
  overflow: hidden;
  &:hover {
    box-shadow: 0 10px 40px 0 rgba(51,119,255,0.20);
  }
  .light_card_tag_warp {
    position: absolute;
    top: 0;
    left: 0;
    // right: 0;
    // left: 130px;
    // overflow: hidden;
    width: 44px;
    height: 44px;
  }
  .light_card_tag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 100px;
    font-family: PingFangSC-Regular;
    font-weight: 600;
    font-size: 11px;
    text-align: center;
    background-color: #F6F9FF;
    color: #2B3245;
    background-color: rgb(133,133,133,0.5);
    z-index: 1;
    &.err {
      color: #F80000;
      background-color: rgba(248, 0, 0, 0.1);
    }
    &.succ {
      color:  #3cb015;
      background-color: rgba(0, 250, 0, 0.2);
    }
  }
  .light_card_bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    box-shadow: 0 0 10px 0 rgba(51,119,255,0.5);
    background-color: #FFFFFF;
  }
  .light_card_body {
    width: 100%;
    height: 100%;
    padding: 10px;
    // background-color:cadetblue ;
    border-radius: 4px;
    .img,img {
      display: inline-block;
      width: 160px;
      height: 100%;
      vertical-align: top;
    }
    .equ_info {
      vertical-align: top;
      width: calc(100% - 160px);
      height: 100%;
      display: inline-block;
      padding-left: 10px;
      overflow: hidden;
      font-size: 15px;
    }
  }
}

</style>
